<template>
  <div class="playground">
    <div v-for="(group, index) in menu" :key="index" class="card-block">
      <ElRow class="card-header">
        <i :class="group.icon" :style="{ color: getColor(index, 5) }" class="card-header-icon"></i>{{ group.title }}
      </ElRow>
      <ElRow :gutter="12" class="grid">
        <ElCol
          v-for="(item, subIndex) in group.children"
          :key="subIndex"
          :lg="{ span: 3 }"
          :md="{ span: 4 }"
          :sm="{ span: 6 }"
          :xg="{ span: 2 }"
          :xs="{ span: 8 }"
          style="margin-top: 10px; cursor: pointer">
          <ElCard shadow="hover" style="position: relative" @click.native="onItemClick(item)">
            <i :class="item.icon" :style="{ color: getColor(index, subIndex) }" class="icon-size"></i>
            <p class="card-label" :title="item.label">{{ item.label }}</p>
          </ElCard>
        </ElCol>
      </ElRow>
    </div>
    <UserPicker
      v-if="isShowUserPicker"
      :pre-selected-users="users"
      :reserve-position-on-close="false"
      close-on-click-modal
      :visible.sync="isShowUserPicker"
      multiple
      @on-confirm="onConfirm" />
    <DepartmentPicker :visible.sync="isShowOuInfoDialog" @confirm="selectOuInfoSuccess" />
    <IframeWindow :visible.sync="showWindow" />
  </div>
</template>

<script>
  import { trimEnd } from 'lodash-es'
  import { getColor4 } from '@web-utils/core'
  import { matrix, textRows } from '@/views/playground/echarts/data/data'

  export default {
    name: 'Playground',
    data() {
      return {
        matrix,
        textRows,
        show1: false,
        show2: false,
        show3: false,
        showExcel: false,
        showChart: false,
        style: 1,
        showWindow: false,
        isShowUserPicker: false,
        isShowUserPicker1: false,
        isShowOuInfoDialog: false,
        users1: [],
        users: [
          {
            id: '1',
            name: '管理员'
          }
        ],
        menu: [
          {
            title: '业务组件',
            icon: 'el-icon-tickets',
            children: [
              {
                label: '代码生成',
                icon: 'el-icon-cpu',
                path: '/codeGen'
              },
              {
                label: '选人对话框',
                icon: 'el-icon-tickets',
                action: 'showUserPicker'
              },
              {
                label: '选部门对话框',
                icon: 'el-icon-office-building',
                action: 'selectOuInfo'
              },
              {
                label: 'ECharts 组件',
                icon: 'el-icon-tickets',
                path: '/echartsDemo'
              },
              {
                label: '可编辑树',
                icon: 'el-icon-edit',
                path: '/editableTreeDemo'
              },
              {
                label: '分页表格',
                icon: 'el-icon-tickets',
                path: '/pageableTableDemo'
              },
              {
                label: '对话框',
                icon: 'el-icon-tickets',
                path: '/dialogDemo'
              },
              {
                label: '文件管理器',
                icon: 'el-icon-folder-opened',
                path: '/xFileExplorerLiteDemo'
              },
              {
                label: 'iframe 弹窗',
                icon: 'el-icon-tickets',
                action: 'showFrameWindow'
              },
              {
                label: '权限相关',
                icon: 'el-icon-tickets',
                path: '/privilegeDemo'
              },
              {
                label: '表单示例',
                icon: 'el-icon-tickets',
                path: '/formDemo'
              },
              {
                label: '表单示例2',
                icon: 'el-icon-tickets',
                path: '/formNavDemo'
              },
              {
                label: '表单示例3',
                icon: 'el-icon-tickets',
                path: '/avueFormTest'
              },
              {
                label: '表单示例3',
                icon: 'el-icon-tickets',
                path: '/formViewDemo/-1'
              },
              {
                label: '数据选择表格示例',
                icon: 'el-icon-tickets',
                path: '/dataTablePickerDemo'
              },
              {
                label: '标签打印',
                icon: 'el-icon-printer',
                path: '/testPrint'
              }
            ]
          },
          {
            title: '其他',
            icon: 'el-icon-tickets',
            children: [
              {
                label: 'ElementUI 图标',
                icon: 'el-icon-tickets',
                path: '/elIcons'
              },
              {
                label: 'FyIcon 图标',
                icon: 'el-icon-tickets',
                path: '/fyIcons'
              },
              {
                label: '预置颜色',
                icon: 'el-icon-tickets',
                path: '/color'
              },
              {
                label: 'MarkdownDemo',
                icon: 'el-icon-tickets',
                path: '/markdownDemo'
              },
              {
                label: 'DocumentEditorDemo',
                icon: 'el-icon-tickets',
                path: '/documentEditorDemo'
              }
            ]
          }
        ],
        resp: []
      }
    },
    methods: {
      showUsers1() {
        this.isShowUserPicker1 = true
      },
      showFrameWindow() {
        this.showWindow = true
      },
      showExcelTool() {
        this.showExcel = true
      },
      showChartDialog() {
        this.showChart = true
      },
      getColor: getColor4,
      showUserPicker() {
        this.isShowUserPicker = true
      },
      onConfirm(users) {
        // console.log(users)
        this.users = users
        this.$message.success({
          message: `已选人员：${trimEnd(
            users.reduce((pre, value) => `${pre}${value.name},`, ''),
            ','
          )}`,
          duration: 2000
        })
      },
      selectOuInfo() {
        this.isShowOuInfoDialog = true
      },
      selectOuInfoSuccess(node) {
        // console.log(node)
      },
      showXDepartmentUserPicker() {
        this.show1 = true
      },
      showXUserPicker() {
        this.show2 = true
      },
      showXXUserPicker() {
        this.show3 = true
      },
      onItemClick(item) {
        if (item.path) {
          this.$router.push(item.path)
        } else if (item.url) {
          window.open(item.url, '_blank')
        } else if (item.action) {
          this[item.action] && this[item.action]()
        }
      }
    }
  }
</script>

<style lang="scss">
  .playground {
    display: block;
    padding: 0 10px 10px;

    .icon-size {
      margin-bottom: 10px;
      font-size: 2.5em;
    }

    .grid .el-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100px;
    }

    .tips-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      color: #bfbfbf;
      font-size: 0.5em;
    }

    .grid {
      padding-right: 10px;
      padding-left: 10px;
    }

    .card-block {
      margin-top: 10px;
      padding-bottom: 10px;
      overflow: hidden;
      background-color: #fdfdfd;
      border: 1px solid #d2d2d2;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .card-header {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 10px;
      font-weight: bold;
      line-height: 40px;
      background-color: #f5f7fa;
    }

    .card-header-icon {
      margin-right: 10px;
      font-size: 1.5em;
    }

    .card-label {
      font-size: 0.8em;
      text-align: center;

      @include ellipsis;
    }
  }
</style>
